<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>-->
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>
    <link href="/static/css/common_biz.css" rel="stylesheet"/>

    <title>代码模板</title>
    <style>

        .time {
            font-size: 13px;
            color: #999;
        }

        .bottom {
            margin-top: 13px;
            line-height: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .button {
            padding: 0;
            min-height: auto;
        }

    </style>
</head>
<body class="skin-default">
<div id="app" class="element-app-box">

    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">
                <el-button type="primary" @click="toAdd"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;添加模板组
                </el-button>
            </div>
        </el-col>
    </el-row>

    <el-row :gutter="15">
        <el-col :span="24">
            <div style="display: flex;flex-wrap: wrap;">
                <div style="width: 310px;margin-right: 20px;margin-bottom: 20px;" v-for="group in dataTable.dataList" :key="group.id">
                    <el-card :body-style="{ padding: '0px' }">
                        <div class="image-box"><img class="image" src="/static/images/codeTemplateGroup.jpg"/></div>
                        <div style="padding: 12px">
                            <span class="text-overflow-ellipsis" :title="group.name">{{ group.name }}</span>
                            <div class="bottom">
                                <time class="time text-overflow-ellipsis" :title="group.remark">{{ group.remark }}&nbsp;</time>
                            </div>
                            <div class="bottom">
                                <time class="time"></time>
                                <el-button-group class="ml-4">
                                    <el-button type="success" size="small" title="更新组信息" @click="toEdit(group)"><i
                                            class="fa fa-pencil-square-o" aria-hidden="true"></i></el-button>
                                    <el-button type="warning" size="small" title="管理代码模板" @click="manageGroup(group)"><i
                                            class="fa fa-puzzle-piece" aria-hidden="true"></i></el-button>
                                    <el-button type="danger" size="small" title="删除模板组" @click="deleteItem(group)"><i
                                            class="fa fa-trash-o" aria-hidden="true"></i></el-button>
                                </el-button-group>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>


        </el-col>
    </el-row>

    <el-dialog v-model="addForm.showFlag" :title="addForm.title" width="500px"
               :close-on-click-modal="false">
        <el-form ref="addFormRef" :model="addForm.addData" :rules="addForm.formRules" label-width="75px">
            <el-form-item label="名称" prop="name">
                <el-input v-model="addForm.addData.name" placeholder="模板组名称"></el-input>
            </el-form-item>
            <el-form-item label="说明" prop="remark">
                <el-input v-model="addForm.addData.remark" type="textarea" :rows="2" placeholder="模板组说明"></el-input>
            </el-form-item>
            <el-form-item label="显示顺序">
                <el-input-number v-model="addForm.addData.dataSequence" :step="10" placeholder="显示顺序"></el-input-number>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="closeAddWin">取消</el-button>
                <el-button type="primary" @click="addConfirm">确认</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="editForm.showFlag" :title="editForm.title" width="500px"
               :close-on-click-modal="false">
        <el-form ref="editFormRef" :model="editForm.editData" :rules="editForm.formRules" label-width="75px">
            <el-form-item label="名称" prop="name">
                <el-input v-model="editForm.editData.name" placeholder="模板组名称"></el-input>
            </el-form-item>
            <el-form-item label="说明" prop="remark">
                <el-input v-model="editForm.editData.remark" type="textarea" :rows="2" placeholder="模板组说明"></el-input>
            </el-form-item>
            <el-form-item label="显示顺序">
                <el-input-number v-model="editForm.editData.dataSequence" :step="10" placeholder="显示顺序"></el-input-number>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="closeEditWin">取消</el-button>
                <el-button type="primary" @click="editConfirm">确认</el-button>
            </div>
        </template>
    </el-dialog>


    <el-dialog v-model="groupForm.showFlag" :title="groupForm.title" width="100%" :fullscreen="true"
               :close-on-click-modal="false">
        <div class="dialog-iframe-box">
            <iframe frameborder="0" width="100%" height="100%" :src="openGroupManageUrl"></iframe>
        </div>
        <!--        <template #footer>-->
        <!--            <div class="dialog-footer">-->
        <!--                <el-button @click="closeEditWin">取消</el-button>-->
        <!--                <el-button type="primary" @click="editConfirm">确认</el-button>-->
        <!--            </div>-->
        <!--        </template>-->
    </el-dialog>

</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--layer-->
<script src="/static/plugin/layer/layer.js"></script>
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<script src="/static/js/common_biz.js"></script>
<script type="text/javascript">

    const app = Vue.createApp({
        data: function () {
            return {
                searchParam: {
                    user: '123'
                    , region: ''
                }
                , colspan: 4
                , deleteUrl: '/lowcode/lcpTemplateGroup/delete'
                // 数据表格
                , dataTable: {
                    dataList: []
                    , dataUrl: '/lowcode/lcpTemplateGroup/getList'
                }
                // 新增表单
                , addForm: {
                    showFlag: false
                    , title: '添加模板组'
                    , formUrl: ''
                    , addData: {dataSequence:10}
                    , addUrl: '/lowcode/lcpTemplateGroup/insert'
                    , formRules: {
                        name: [
                            {
                                required: true,
                                message: '请输入模板组名称',
                                trigger: 'blur',
                            }
                        ]
                    }
                }
                // 编辑表单
                , editForm: {
                    showFlag: false
                    ,
                    title: '编辑模板组'
                    ,
                    formUrl: '/page/lowcode/templateGroupForm.html'   // 表单url
                    ,
                    checkedItemId: '' // 选中项id
                    ,
                    editData: {}
                    ,
                    editUrl: '/lowcode/lcpTemplateGroup/update'
                    ,
                    formRules: {
                        name: [
                            {
                                required: true,
                                message: '请输入模板组名称',
                                trigger: 'blur',
                            }
                        ]
                    }
                }
                , groupForm: {
                    showFlag: false
                    ,
                    title: '模板维护'
                    , checkedItemId: '' // 选中项id
                    , formUrl: '/page/lowcode/templateGroupForm.html'   // 表单url
                }
            }
        }
        , computed: {
            templateShowList() {
                var list = this.dataTable.dataList;
                var col = parseInt(24 / this.colspan);// 每行多少列
                var arr = [];
                var sub = [];
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    if (i > 0 && i % col === 0) {// 整行的时候, 则把子数组放到一级数组
                        arr.push(sub);
                        sub = [];
                    }
                    sub.push(item);
                    if (i === list.length - 1) {// 到达最后一个元素, 则把子数组放到一级数组
                        arr.push(sub);
                    }

                }
                return arr;
            }
            , openAddFormUrl() {
                return this.addForm.formUrl;
            }
            , openEditFormUrl() {
                return this.editForm.formUrl + '?id=' + this.editForm.checkedItemId;
            }
            , openGroupManageUrl() {
                return this.groupForm.formUrl + '?id=' + this.groupForm.checkedItemId;
            }
        }
        , methods: {
            // 查询
            toSearch() {
                console.info('toSearch');
            },
            // 新增
            toAdd() {
                this.openAddWin();
            },
            // 编辑, 参数是选中项对象
            toEdit(group) {
                this.editForm.checkedItemId = group.id;
                this.editForm.editData = {id: group.id, name: group.name, remark: group.remark, dataSequence: group.dataSequence};
                this.openEditWin();
            },
            // 组管理
            manageGroup(group) {
                this.groupForm.checkedItemId = group.id;
                this.groupForm.showFlag = true;
            },
            // 打开新增弹层
            openAddWin() {
                this.addForm.showFlag = true;
            },
            // 关闭新增弹层
            closeAddWin() {
                this.addForm.showFlag = false;
            },
            // 打开编辑弹层
            openEditWin() {
                this.editForm.showFlag = true;
            },
            // 关闭编辑弹层
            closeEditWin() {
                this.editForm.showFlag = false;
            },

            // 确认新增
            addConfirm() {
                var _this = this;
                this.$refs.addFormRef.validate(function (success, object) {// success表示校验是否通过, object表示校验失败的字段: {name: [{message: "请输入模板组名称", fieldValue: undefined, field: "name"}]}
                    if (success) {
                        _this.closeAddWin();
                        jo.postJson(_this.addForm.addUrl, {body:_this.addForm.addData}).success(function (json) {
                            jo.showSuccessMsg('添加成功~');
                            _this.refreshList();
                            _this.addForm.addData = {dataSequence:10};
                        });
                    }
                });
            },
            // 确认编辑
            editConfirm() {
                var _this = this;
                this.$refs.editFormRef.validate(function (success, object) {// success表示校验是否通过, object表示校验失败的字段: {name: [{message: "请输入模板组名称", fieldValue: undefined, field: "name"}]}
                    if (success) {
                        _this.closeEditWin();
                        var param = {
                            id: _this.editForm.editData.id
                            , name: _this.editForm.editData.name
                            , remark: _this.editForm.editData.remark
                            , dataSequence: _this.editForm.editData.dataSequence
                        };
                        jo.postJson(_this.editForm.editUrl, {body:param}).success(function (json) {
                            jo.showSuccessMsg('更新成功~');
                            _this.refreshList();
                            _this.editForm.checkedItemId = '';
                            _this.editForm.editData = {};
                        });
                    }
                });
            },
            // 删除
            deleteItem(group) {
                var _this = this;
                jo.confirm('您确定要删除此套代码模板嘛?', function () {
                    jo.postJson(_this.deleteUrl, {body: group.id}).success(function (json) {
                        jo.showSuccessMsg('删除成功~');
                        _this.refreshList();
                    });
                });
            },
            // 刷新列表
            refreshList() {
                var _this = this;
                jo.postJson(this.dataTable.dataUrl, {}).success(function (json) {
                    _this.dataTable.dataList = json.data;
                });
            },
            // 初始化
            initApp() {
                this.refreshList();
            }
        }
        , mounted() {
            this.initApp();
        }
        , setup() {
            console.info('setup');
        }
    });
    app.use(ElementPlus, {});
    var appVM = app.mount("#app");
</script>

</body>
</html>
